<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>书籍购物车案例</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id="app">
		<div v-if='books.length'>
			<table>
				<thead>
					<tr>
						<th></th>
						<th>书籍名称</th>
						<th>出版日期</th>
						<th>价格</th>
						<th>购买数量</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item, index) in books">
						<td>{{item.id+1}}</td>
						<td>{{item.name}}</td>
						<td>{{item.time}}</td>
						<!-- <td>{{item.price.toFixed(2)}}</td> -->
						<!-- 方法解决 -->
						<!-- <td>{{getPrice(item.price)}}</td> -->
						<!-- 过滤器解决 filters -->
						<td>{{item.price | showPrice}}</td>
						<td>
							<button @click="sub(index)">-</button>
							{{item.num}}
							<button @click="add(index)">+</button>
						</td>
						<td><button @click="remove(index)">移除</button></td>
					</tr>
				</tbody>
			</table>
			<h2>总价格：{{getAllPrice | showPrice}}</h2>
		</div>
		<h2 v-else>您没有添加书籍</h2>
		
	</div>
	<script src="../js/vue.js"></script>
	<script src="main.js"></script>
</body>
</html>